import {YcGameObject} from "./YcGameObject";

export class GameMap extends YcGameObject {
    constructor(ctx, parent) {
        super()
        this.ctx = ctx;
        this.parent = parent;
        this.rows = 14;
        this.cols = 14;
        this.cellSize = 40
        this.pieces = [];
        this.L = 0;
        this.step = 0;
        this.click_handler = null
        this.state = 0;
        this.currentStep = 1
        this.status = "play";
        this.chesses = []
        this.currentMouse = {}
    }

    start() {
        this.init()
        this.render()
        this.update_size()
    }

    init() {
        this.chesses = new Array(14).fill(0).map(() => new Array(14).fill(0));
        this.ctx.canvas.addEventListener('click', (e) => {
            let x = Math.round(e.offsetY / this.L), y = Math.round(e.offsetX / this.L)
            if ( x < 1 || x > 13 || y < 1 || y > 13 || this.chesses[y][x] !== 0 ) return
            if (this.chesses[y][x] === 0) {
                this.chesses[y][x] = this.currentStep % 2 + 1; // 1 表示黑棋
                this.pieces.push()
            }
            console.log(this.chesses[y][x])
            this.currentStep ++
        });
        this.ctx.canvas.addEventListener("mousemove", (e) => {
            let x = Math.round(e.offsetY / this.L), y = Math.round(e.offsetX / this.L)
            if ( x < 1 || x > 13 || y < 1 || y > 13 ) {
                this.currentMouse = {}
            }
            else this.currentMouse = {y, x}
        })
    }

    drawPiece(x, y, color) {
        this.ctx.beginPath();
        this.ctx.arc(x * this.cellSize, y * this.cellSize, this.cellSize / 2 - 5, 0, 2 * Math.PI);
        this.ctx.fillStyle = color;
        this.ctx.fill();
    }

    update_size() {
        this.L = parseInt(Math.min(this.parent.clientWidth / this.cols, this.parent.clientHeight / this.rows));
        this.ctx.canvas.width = this.L * this.cols;
        this.ctx.canvas.height = this.L * this.rows;
    }

    update() {
        this.update_size()
        this.render();
    }

    render() {
        const rectColor = "#d6ba9d", lineColor = "#96815d";
        for ( let r = 0; r < this.rows; r ++ ) {
            for ( let c = 0; c < this.cols; c ++ ) {
                this.ctx.beginPath()
                this.ctx.fillStyle = rectColor
                this.ctx.fillRect(c * this.L, r * this.L, this.L, this.L);
                this.ctx.closePath()
            }
        }

        for ( let r = 1; r < this.rows; r ++ ) {
            this.ctx.beginPath()
            if ( r !== 0 ) {
                this.ctx.lineWidth = 1
            } else {
                this.ctx.lineWidth = 2
            }
            this.ctx.fillStyle = lineColor
            this.ctx.moveTo(this.L, r * this.L);
            this.ctx.lineTo((this.rows - 1) * this.L, r * this.L);
            this.ctx.stroke();
            this.ctx.closePath()
        }

        for ( let c = 1; c < this.cols; c ++ ) {
            if ( c !== 0 ) {
                this.ctx.lineWidth = 1
            } else {
                this.ctx.lineWidth = 2
            }
            this.ctx.fillStyle = lineColor
            this.ctx.moveTo(c * this.L, this.L);
            this.ctx.lineTo(c * this.L, (this.rows - 1) * this.L);
            this.ctx.stroke();
        }

        for (let y = 0; y < 14; y++) {
            for (let x = 0; x < 14; x++) {
                this.draw_chess(x, y, this.chesses[y][x])
            }
        }

        if ( this.currentMouse.x && this.chesses[this.currentMouse.y][this.currentMouse.x] === 0 ) {
            this.draw_chess(this.currentMouse.x, this.currentMouse.y, this.currentStep % 2 + 1)
        }

        // for ( let i = 0; i < this.pieces.length; i ++ ) {
        //     const {x, y, status} = this.pieces[i]
        //     this.draw_chess(x, y, status)
        // }
    }

    draw_chess(x, y, state) {
        if ( x < 1 || x > 13 || y < 1 || y > 13 ) return
        if (state === 0 || state === '0' ) return
        this.ctx.beginPath()
        this.ctx.arc(y * this.L, x * this.L,this.L * (0.35),0,2 * Math.PI, false);
        if (state === 1 || state === "1" ) {
            this.ctx.fillStyle = "#FFFFFF"
        } else if ( state === 2 || state === "2" ) {
            this.ctx.fillStyle = "#000000"
        }
        this.ctx.fill()
        this.ctx.closePath()
    }


    checkWin(board) {
        const rows = this.rows
        const cols = this.cols
        let index = -1;

        // 检查行
        for (let i = 0; i < rows; i++) {
            for (let j = 0; j < cols - 4; j++) {
                const curr = board[i][j];
                if (curr !== -1 && curr === board[i][j + 1] && curr === board[i][j + 2] && curr === board[i][j + 3] && curr === board[i][j + 4]) {
                    index = curr;
                }
            }
        }

        // 检查列
        for (let i = 0; i < rows - 4; i++) {
            for (let j = 0; j < cols; j++) {
                const curr = board[i][j];
                if (curr !== -1 && curr === board[i + 1][j] && curr === board[i + 2][j] && curr === board[i + 3][j] && curr === board[i + 4][j]) {
                    index = curr;
                }
            }
        }

        // 检查对角线
        for (let i = 0; i < rows - 4; i++) {
            for (let j = 0; j < cols - 4; j++) {
                const curr = board[i][j];
                if (curr !== -1 && curr === board[i + 1][j + 1] && curr === board[i + 2][j + 2] && curr === board[i + 3][j + 3] && curr === board[i + 4][j + 4]) {
                    index = curr;
                }
            }
        }

        // 检查反对角线
        for (let i = 0; i < rows - 4; i++) {
            for (let j = cols - 1; j >= 4; j--) {
                const curr = board[i][j];
                if (curr !== -1 && curr === board[i + 1][j - 1] && curr === board[i + 2][j - 2] && curr === board[i + 3][j - 3] && curr === board[i + 4][j - 4]) {
                    index = curr;
                }
            }
        }
        if (index !== -1) {
            this.status = "end"
        }
        // 如果没有人胜利，返回-1
        return index;
    }
}